<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件示例2</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>全局注册</h3>
			<my-global-component>我是全局注册组件</my-global-component>
			<hr >
			<br>
			<h3>局部注册</h3>
			<!-- <my-local-component>我是局部注册组件</my-local-component> -->
			<aa>我是局部注册组件</aa>
			<hr >
			<br>
			<h3>在组件中传递布尔类型参数</h3>
			<!-- 错误写法 -->
			<!-- <my-boolean-prop-component is-win="false"></my-boolean-prop-component> -->
			<!-- 正确写法 -->
			<my-boolean-prop-component :is-win="false"></my-boolean-prop-component>
			<hr >
			<br>
			
			<h3>给属性限制类型、默认值、必填</h3>
			<my-component-prop-demo1 p_color="green" :p_font_size="20">测试组件中属性的校验</my-component-prop-demo1>
			<hr >
			<br>
			
			<h3>将整个对象作为参数通过属性传递到组件中</h3>
			<my-component-prop-demo2></my-component-prop-demo2>
			<my-component-prop-demo2 :obj="userInfo"></my-component-prop-demo2>
			<hr >
			<br>
			
			<h3>将对象的每个属性作为单独的参数通过属性传递到组件中</h3>
			<my-component-prop-demo3 v-bind="userInfo"></my-component-prop-demo3>
			<hr >
			<br>
			
		</div>
	</body>
	<script type="text/javascript">
		
		// 定义全局注册组件
		Vue.component('my-global-component', {
			template: '<p><slot></slot></p>'
		});
		
		// 定义局部注册组件
		let MyLocalComponent = {
			template: '<p><slot></slot></p>'
		};
		
		// 传入布尔类型参数
		let MyBooleanPropComponent = {
			template: `
				<div>
					<input type="checkbox" v-model="localIsWin" /> isWin 
					<p>当前值：{{localIsWin}}，类型：{{typeof localIsWin}}</p>
				</div>`,
			props: {'is-win':Boolean},
			data: function(){
				return {localIsWin: this.isWin}
			}
		}
		
		Vue.component('my-component-prop-demo1', {
			template: `
				<div>
					<p :style="{fontSize:p_font_size+'px', color: p_color}"><slot></slot></p>
				</div>
			`,
			props: {
				p_font_size: {
					type: Number,
					default: 14
				},
				p_color: {
					type: String,
					required: true
				}
			}
		});
		
	
		
		// 对象类型参数
		Vue.component('my-component-prop-demo2', {
			template:`
				<div>
					<h3>{{obj.name + ' - 资料'}}</h3>
					<ul>
						<li>性别：{{obj.gender}}</li>
						<li>年龄：{{obj.age}}</li>
						<li>爱好：{{obj.hobby}}</li>
					</ul>
				</div>
			`,
			props: {
				obj: {
					type: Object,
					default: function(){
						return {
							name: 'John', age: 31, gender: '男', hobby: 'Music'
						}
					}
				}
			}
		});
		
		// 把对象每个属性作为单独参数传递
		Vue.component('my-component-prop-demo3', {
			template:`
				<div>
					<h3>{{name + ' - 资料'}}</h3>
					<ul>
						<li>性别：{{gender}}</li>
						<li>年龄：{{age}}</li>
						<li>爱好：{{hobby}}</li>
					</ul>
				</div>
			`,
			// props: ['name', 'gender', 'age', 'hobby'],
			
			props: {
				name: String,
				gender: {type: String, default: '男'},
				age: Number,
				hobby: String
			}
		});		
		
		let vm = new Vue({
			el: '#app',
			components: {
				'aa': MyLocalComponent,
				'my-boolean-prop-component': MyBooleanPropComponent
			},
			data: {
				userInfo: {
					name: 'Jarry', age: 19, gender: '女', hobby: 'Running'
				}
			}
		});
	</script>
</html>
